<template>
  <view>
    <view class="navbar">
      <uni-nav-bar @clickLeft="goback" leftIcon="left" fixed="true" border="false" color="#FFF" statusBar="true"
        backgroundColor="#22b9a3" title="高考听力资源" />
    </view>
    <view class="container">
      <!-- 左侧分类 -->
      <view class="categories">
        <view :class="[selectedBook==book.id ? 'category-item-active' : '', 'category-item']"
          v-for="(book, index) in bookList" :key="book.id" @click="selectBook(book.id)">
          <view class="name">
            {{ book.bookName }}
          </view>
        </view>
      </view>
      <!-- 右侧资源列表 -->
      <scroll-view class="products" scroll-y="true">
        <view class="product-item" @click="gotoSeeFile(resource.id)" v-for="(resource, index) in resourcesList" :key="resource.id">
          <view class="product-image">
            <image src="@/static/images/file/mp3.png" mode="aspectFill"></image>
          </view>
          <view class="product-name">{{ resource.hearingName }}</view>
          <view class="buy-button">文件播放</view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    ref
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  //获取书籍
  const bookList = ref([])
  //加载页面
  onLoad(async (option) => {
    const grade = option.grade
    //获取书籍列表
    const result = await http.getRequest("/xhyy/book/page", {
      grade,
      pageNo: 1,
      pageSize: 100
    })
    if (result.code == 0) {
      bookList.value = result.data.list
    } else {
      uni.showToast({
        title: '获取教材失败',
        icon: 'error',
        duration: 1000
      })
    }
    //设置第一本书籍为选中数据
    selectBook(bookList.value[0].id)
  })
  // 默认选中书籍
  const selectedBook = ref(1);

  function selectBook(id) {
    selectedBook.value = id;
    //根据书籍去获取对应的资源
    fetchResourceByBook()
  }
  //获得资源
  const resourcesList = ref([]);

  async function fetchResourceByBook() {
    resourcesList.value=[]
    const API = '/xhyy/hearing/page'
    const result = await http.getRequest(API, {
      bookId: selectedBook.value,
      pageNo: 1,
      pageSize: 20
    })
    if (result.code == 0) {
      resourcesList.value = result.data.list
    } else {
      uni.showToast({
        title: '资源失败',
        icon: 'error',
        duration: 1000
      })
    }
  }

  function goback() {
    uni.navigateBack()
  }
  
  //跳转到详情页
  function gotoSeeFile(resourceId){
    uni.navigateTo({
      url:`/pages/detail/hearingDetail/hearingDetail?resourceId=${resourceId}`
    })
  }
</script>

<style lang="scss" scoped>
  .navbar ::v-deep .uni-nav-bar-text {
    font-size: $uni-font-size-title !important;
    font-family: "siyuan";
  }

  .type {
    background-color: $uni-bg-color-grey;
  }

  .container {
    display: flex;
    padding: 22rpx;
    border-radius: 10rpx;
    height: 100vh;
  }

  .categories {
    width: 173rpx;
    background-color: #fff;
    height: 100vh;
  }

  .category-item {
    cursor: pointer;

    .name {
      height: 87rpx;
      line-height: 87rpx;
      width: 200rpx;
      font-family: SourceHanSansSC-Regular;
      font-size: 28rpx;
      text-align: left;
      padding-left: 8rpx;
      color: #858685;

    }
  }

  .category-item-active {
    border-left: 7rpx solid #22b9a3;

    .name {
      color: #22b9a3;
    }
  }

  .product-item {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 25.5rpx;
    padding: 17rpx;
    border: 1px solid #eee;
    border-radius: 9rpx;
    background-color: #fff;
  }

  .product-image {
    width: 150rpx;
    height: 180rpx;
    margin-right: 25.5rpx;
  }

  .product-image image {
    width: 150rpx;
    height: 180rpx;
  }


  .product-name {
    text-align: center;
    font-size: 27.2rpx;
    font-weight: bold;
    margin-bottom: 9px;
  }

  .buy-button {
    position: absolute;
    right: 140rpx;
    bottom: 15rpx;
    display: inline-block;
    width: 150rpx;
    height: 50rpx;
    line-height: 50rpx;
    background-color: #24c373;
    border-radius: 30rpx;
    font-size: 25rpx;
    color: #fff;
    letter-spacing: 3.5rpx;
    text-align: center;

  }
</style>